<template>
	<view class="liveListPage">
		<bar title="直播预约" :isLink="false"></bar>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
			v-if="!list.length && !isLoading && isLoad" text="没有更多了"></u-empty>
		<view class="liveMovie" v-if="isLoad">
			<view class="liveList" v-for="(item,index) in list" :key="index">
				<view class="image" @click="goDetail(item.id)">
					<u--image :src="baseUrl+'/'+item.image" shape="square" mode="aspectFill" width="320rpx"
						height="226rpx" radius="8rpx 8rpx 0 0">
					</u--image>
				</view>
				<view class="liveInfo" @click="goDetail(item.id)">
					<view class="title">{{item.liveName}}</view>
					<view class="statics">
						<view class="teacher">{{item.liveTeacher}}</view>
						<view class="total">{{getReleaseTime(item.beginTime)}}</view>
					</view>
				</view>
				<view :class="item.isMake==='0'?'liveBtn':'liveBtn already'" @click="receiveMessage(item)">
					{{item.isMake==="0"?"预约":"已预约"}}
				</view>
			</view>
		</view>
		<u-loadmore v-if="list.length" :status="isFinish?'nomore':'loading'" loading-text="正在加载" loadmore-text="加载更多"
			nomore-text="没有更多了" color="#d0d0d0" />
	</view>
</template>

<script>
	import Bar from "@/components/bar.vue";
	export default {
		components: {
			Bar
		},
		data() {
			return {
				baseUrl: this.$api.baseUrl,
				list: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				isFinish: false,
				isLoading: false,
				isLoad: false,
				userId: ""
			}
		},
		computed: {
			getReleaseTime(date) {
				return function(date) {
					if (date) {
						if (typeof date === 'number') {
							return new Date(date).format("YYYY-MM-dd hh:mm")
						} else {
							return new Date(date.replace(/\-/g, "/")).format("YYYY-MM-dd hh:mm")
						}
					} else {
						return ""
					}
				}
			},
		},
		onReachBottom() {
			if (!this.isLoading && !this.isFinish) {
				this.pageNo++;
				this.initData();
			}
		},
		onPullDownRefresh() {
			this.doSearch();
		},
		onLoad() {
			uni.getStorage({
				key: "userInfo",
				success: (userInfo) => {
					this.userId = userInfo.data.id;
					this.initData();
				}
			})
		},
		methods: {
			initData(isRefresh) {
				this.isLoading = true;
				Promise.all([
					this.$request.get(this.$api.liveList, {
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						userId: this.userId
					}),
				]).then(res => {
					if (isRefresh) {
						uni.stopPullDownRefresh()
					}
					this.isLoading = false;
					this.list = this.list.concat(res[0].result.records)
					this.total = res[0].result.total;
					if (this.pageNo * this.pageSize < this.total) {
						this.isFinish = false
					} else {
						this.isFinish = true
					}
					this.isLoad = true;
					uni.hideLoading()
				})
			},
			doSearch() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.pageNo = 1;
					this.list = [];
					this.initData(true);
				}
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/liveDetail/liveDetail?id=" + id
				})
			},
			//订阅消息
			receiveMessage(item) {
				if (item.isMake === "1") return;
				uni.requestSubscribeMessage({
					tmplIds: ["KD2ILLav9Cqdzvr142ZMXDegCJohCl63IXCyHjGN9e8"], //数组
					success: (res) => {
						if (res["KD2ILLav9Cqdzvr142ZMXDegCJohCl63IXCyHjGN9e8"] === 'accept') {
							this.$request.post(this.$api.doLive, {
								liveId: item.id,
								userId: this.userId
							}).then(result => {
								uni.navigateTo({
									url: "/pages/liveDetail/liveDetail?id=" + item.id
								})
								setTimeout(() => {
									uni.showToast({
										title: "预约成功",
										icon: "success"
									})
								}, 300)
								uni.hideLoading()
							})
						}
						if (res["KD2ILLav9Cqdzvr142ZMXDegCJohCl63IXCyHjGN9e8"] === 'reject') {
							uni.showToast({
								icon: "none",
								title: "已取消订阅"
							})
						}
					},
					fail: (err) => {
						if (err.errCode == 20004) {
							console.log('关闭小程序主开关')
						} else {
							uni.showToast({
								icon: "none",
								title: "订阅失败"
							})
						}
					}
				})
			},
		}
	}
</script>


<style lang="scss">
	.liveListPage {
		.liveMovie {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 40rpx;

			.liveList {
				display: flex;
				flex-direction: column;
				width: 320rpx;
				background-color: #fff;
				margin-bottom: 30rpx;
				border-radius: 8rpx;
				padding-bottom: 20rpx;

				.image {
					position: relative;
				}

				.liveInfo {
					padding: 24rpx 24rpx 20rpx;

					.title {
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						font-size: 26rpx;
						line-height: 36rpx;
						height: 72rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.statics {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						margin-top: 10rpx;

						.teacher {
							flex-shrink: 0;
						}

						.total {
							flex-shrink: 0;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
				}

				.liveBtn {
					width: 124rpx;
					height: 50rpx;
					line-height: 50rpx;
					background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
					border-radius: 34rpx;
					opacity: 1;
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					margin-left: 20rpx;
				}

				.already {
					background: #F6F6F6;
					color: #666666;
				}
			}
		}
	}
</style>
